<header class="head-main">  
  <div class="head_logo_div" id="head_logo_div">
    <a href="/">
      <img class="head_logo" id="head_logo" src="/images/pic/head.jpg">
    </a>
    <div class="motto motto-l"><h5>千里之行</h5></div>
    <div class="motto motto-r"><h5>始于足下</h5></div>
  </div>

  <div class="head_nav_div" id="head_nav_div">
      <nav class="head_nav">
        <ul id="nav_ul" data-type="home">
            <a href="http://about.coolecho.net">
                <li class="nav_ul_li">About</li>
            </a>
			<a href="/friendslink" data-pjax="true"> 
				<li class="nav_ul_li nav_ul_btn nav_li_friends" data-type="friends">Friends</li>
			</a>
            <a href="/messageboard" data-pjax="true"> 
                <li class="nav_ul_li nav_ul_btn nav_li_tucao" data-type="tucao">Tucao</li>
            </a>
            <a href="/">
                <li class="nav_ul_li nav_ul_btn nav_li_home" data-type="home">Home</li>
            </a>
        </ul>
     </nav>
  </div>
  <canvas id="header-canvas"></canvas>
</header>

<div class="loading-div">
    <div class="progress-bar" id="progress-bar"></div>
</div>

<header class="mobile-head-main">
    <div class="mobile-menu">
        <a class="get-menu-icon" id="get-menu-icon"></a>
        <h3 class="website-h3"><%if(typeof website === "undefined"){%>Spruche<%}else{%><%=website.name%><%}%></h3>
        <a class="home-menu-icon" href="/"></a>
    </div>

    <div class="mobile-nav" id="mobile-nav">
        <div class="mobile-head-logo-div">
            <img class="mobile-head-logo" src="/images/pic/head.jpg">
            <h5 class="motto-h5">千里之行,始于足下</h5>
        </div>

        <div class="mobile-head-nav-div">
            <nav class="mobile-head-nav">
                <ul class="mobile-nav-ul" id="mobile_nav_ul" data-type="home">
                    <a href="/">
                        <li class="nav_li_on nav_ul_li mobile_nav_ul_btn mobile_nav_home" data-type="home">Home</li>
                    </a>
                    <a href="/messageboard" data-pjax="true">
                        <li class="nav_ul_li mobile_nav_ul_btn mobile_nav_tucao" data-type="tucao">Tucao</li>
                    </a>
                    <a href="/friendslink" data-pjax="true"> 
						<li class="nav_ul_li mobile_nav_ul_btn mobile_nav_friends" data-type="friends">Friends</li>
					</a>
                    <a href="http://about.coolecho.net">
                        <li class="nav_ul_li">About</li>
                    </a>
                </ul>
            </nav>
        </div>
    </div>
</header>

<script type='text/javascript'>
    var canvas = document.getElementById('header-canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = canvas.parentNode.offsetWidth;
    canvas.height = canvas.parentNode.offsetHeight;
    window.requestAnimFrame = (function(){
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback){
                    window.setTimeout(callback, 1000 / 60);
                };
    })();

    var waves = ["rgba(157, 187, 210, 0.4)",
        "rgba(171, 216, 201, 0.4)",
        "rgba(157,192,249, 0.4)",
        "rgba(0,222,255, 0.2)"];
    var step = 0;
    function loop() {
        step++;
        ctx.clearRect(0,0,canvas.width,canvas.height);

        for(var j = waves.length - 1; j >= 0; j--) {
            var offset = step + j * Math.PI * 12;
            ctx.fillStyle = waves[j];
            var angle = (step+j*45)*Math.PI/180;
            var deltaHeight = Math.sin(angle) * 30;
            var deltaHeightRight = Math.cos(angle) * 30;
            ctx.beginPath();
            ctx.moveTo(0, 50 + deltaHeight);
            // ctx.lineTo(canvas.width, canvas.height/2 + deltaHeightRight);
            ctx.bezierCurveTo(canvas.width /3 , 50+deltaHeight, canvas.width * 2 / 3, 50+deltaHeightRight, canvas.width, 50+deltaHeightRight);
            ctx.lineTo(canvas.width, canvas.height);
            ctx.lineTo(0, canvas.height);
            ctx.lineTo(0, canvas.height / 2 + deltaHeight);
            ctx.closePath();
            ctx.fill();
        }
        requestAnimFrame(loop);
    }

    loop();
</script>